<template>
  <div>
    <!-- 背景 -->
    <div class="setting">
      <!-- 定宽 -->
      <div class="heater">
        <!-- 头像栏 -->
        <div class="via">
          <a><img src="/img/t1.jpg" alt="" /></a>
          <!-- 登录注册 -->
          <div v-if="!$store.state.isLogin&&!$store.state.uname">
            <router-link class="a" to="/login">登录</router-link>
            <span class="a3">|</span>
            <router-link to="/register" class="a">注册</router-link>
          </div>
          <!-- 如果用户登录之后 -->
          <div v-if="$store.state.isLogin&&$store.state.uname">
            <span class="a">{{ $store.state.uname }}</span>
            <span class="a1" @click="clearS">退出</span>
          </div>
        </div>

        <!-- 充值栏 -->
        <div class="Pay" @click="goVip">
          <div class="Pay-left">
            <img src="/img/t3.jpg" alt="" />
            <a class="a">年会员卡</a>
            <i>|</i>
            <a>服务享九折</a>
          </div>
          <div class="pay-right"><a>立即开通</a></div>
        </div>

        <!-- 我的宠物 -->
        <div class="pet-my">
          <div class="my-left"><a>我的宠物</a></div>
          <div class="pet-right">
            <a>
              <img src="/img/jh.png" alt="" />
              <span @click="goCdcard">添加</span>
            </a>
          </div>
        </div>

        <!-- 加入宠物派 -->
        <router-link to="/petpetpets">
        <div class="join">
          <h2>加入宠物派</h2>
          <div class="apply-for">
            <p>成为伴宠专员</p>
            <router-link to="/petpetpets">立即申请</router-link>
            <img src="/img/cats/cat.png" alt="">
          </div>
        </div>
        </router-link>
        <router-link to="/fostercare">
        <div class="join">
          <div class="board">
            <p>入驻寄养</p>
            <router-link to="/fostercare">立即申请</router-link>
            <img src="/img/cats/cat-5.png" alt="">
          </div>
        </div>
        </router-link>
        <router-link to="/adopt">
        <div class="join">
          <div class="adopt">
            <p>宠物领养</p>
            <router-link to="/adopt">去看看~</router-link>
            <img src="/img/cats/cat-3.png" alt="">
          </div>
        </div>
        </router-link>

        <!-- 结尾 -->
        <div class="emd">
          <span>在线客服</span>
          <img src="/img/dh.png" alt="" />
          <p class="emd-p">工作时间：周一至周日9:00 - 18:00</p>
          <p>——宠物派 国家首家标准化宠物服务平台——</p>
        </div>
      </div>
      <br />
    </div>
    <my-footer />
  </div>
</template>

<script>
import MyFooter from "@/components/MyFooter.vue";
export default {
  name: "mine",
  components: { MyFooter },

  methods: {
    goCdcard(){
      this.$router.push("/cdcard")
    },
   clearS(){
     sessionStorage.removeItem("isLogin")
     sessionStorage.removeItem("uname")
     this.$router.push('/')
     window.location.reload()
   },
    goVip() {
      this.$router.push("/vip")
      // .catch(err => { console.log(err) });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  color: #222;
}
.a3{
  position: relative;
  top: -0.3vw;
}
.a1{
  display: inline-block;
  // background-color: #7f05ff;
  margin-left: 5vw;
  font-size: 14px;
  color: #333;
  border: 1px solid #f2f2f2;
  background-color: #f2f2f2;
  width: 13vw;
  height: 7vw; line-height: 7vw;
  text-align: center; border-radius: 5px;
}
.setting {
  width: 100%;
  height: 245px;
  // background: url("/public/img/bj.png");
  background-color: #f9dd62;

  .heater {
    width: 92%;
    // height: 100%;
    margin: 0 auto;

    // 头像栏
    .via img {
      width: 50px;
      height: 50px;
      border: 2px solid #fefefb;

      border-radius: 50%;
      vertical-align: middle;
      margin-right: 20px;
    }
    .via {
      height: 200px;
      position: relative;
      top: 12vw;
      left: 2vw;
      .a {
        font-size: 16px;
        font-weight: bold;
        margin-right: 5px;
        margin-left: 5px;
      }
      div {
        display: inline-block;
        margin-left: -2vw;
      }
    }

    // 充值栏
    .Pay {
      width: 92%;
      height: 16vw;
      border-radius: 10px;
      background-color: rgba(63, 61, 72, 0.9);

      // background: url('/public/img/bj.png');
      i {
        color: #f7f6f7;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 130px;

      .Pay-left {
        img {
          display: inline-block;
          width: 35px;
          height: 35px;
          border: 1px solid #eaeaeb;
          border-radius: 50%;
          margin: 0 15px;
        }
      }
      .a {
        font-weight: bold;
      }
      a {
        position: relative;
        top: 0.5vw;
        color: #f9dd62;
        // font-weight:bold;
        margin-right: 10px;
      }
      i {
        position: relative;
        top: 0.5vw;
      }
      .Pay-left :last-child {
        font-size: 12px;
        color: #ececed;
        margin-left: 10px;
      }

      .pay-right {
        margin: 0 10px;

        a {
          color: #ececed;
          font-size: 12px;
          position: relative;
          top: -0.4vw;
          right: 1.5vw;
        }
      }
    }

    // 我的宠物
    .pet-my {
      width: 92%;
      height: 60px;
      border-radius: 10px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 200px;
      box-shadow: 0px 8px 5px rgb(247, 247, 248);

      .my-left > a {
        display: inline-block;
        font-weight: 600;
        margin-left: 10px;
        // font-size: 17px;
      }
      .pet-right span {
        color: #a4a2ae;
        font-size: 16px;
        margin: 0 10px 0 5px;
        font-size: 14px;
      }
    }

    // 加入宠物派
    .join {
      position: relative;
      top: 70px;
      margin: 0 0 20px 0;
      h2 {
        font-weight: 600;
        font-size: 18px;
        margin: 15px 0;
      }
      .apply-for {
        position: relative;
        height: 90px;
        background-color: #ff8b94;
        border-radius: 10px;
        img{
          width: 90px; 
          display: inline-block;
          position: absolute;
          top: -2vw; left: 60vw;
        }

        p {
          font-weight: 600;
          font-size: 16px;
          padding: 15px 0 15px 20px;
          color: #fffcfc;
        }
        a {
          display: inline-block;
          width: 85px;
          line-height: 25px;
          text-align: center;
          background-color: #ff525b;
          border-radius: 15px;
          margin-left: 15px;
          font-size: 14px;
          color: #fffcfc;
        }
      }
      .board {
         position: relative;
        height: 90px;
        background-color: #a291fe;
        border-radius: 10px;
         img{
          width: 90px; 
          display: inline-block;
          position: absolute;
          top: 0vw; left: 60vw;
        }

        p {
          font-weight: 600;
          font-size: 16px;
          padding: 15px 0 15px 20px;
          color: #fffcfc;
        }
        a {
          display: inline-block;
          width: 85px;
          line-height: 25px;
          text-align: center;
          background-color: #7f05ff;
          border-radius: 15px;
          margin-left: 15px;
          font-size: 14px;
          color: #fffcfc;
        }
      }
      .adopt {
         position: relative;
        height: 90px;
        background-color: #ffc65b;
        border-radius: 10px;
         img{
          width: 90px; 
          display: inline-block;
          position: absolute;
          top: 0vw; left: 60vw;
        }
        p {
          font-weight: 600;
          font-size: 16px;
          padding: 15px 0 15px 20px;
          color: #fffcfc;
        }
        a {
          display: inline-block;
          width: 85px;
          line-height: 25px;
          text-align: center;
          background-color: #ff9600;
          border-radius: 15px;
          margin-left: 15px;
          font-size: 14px;
          color: #fffcfc;
        }
      }
    }

    // 结尾
    .emd {
      margin: 100px 0;
      text-align: center;
      font-size: 14px;

      span {
        color: #d3d3d3;
      }

      p {
        color: #d3d3d3;
      }
      .emd-p {
        margin: 15px;
      }
    }
  }
}
</style>
